<template>
    <div>
        <el-container style="height: 100vh">
            <el-aside width="auto">
                <!-- logo -->
                <div :class="{ logo: !sidebarCollapse, 'logo-collapse': sidebarCollapse }">
                    <img src="../assets/logo.png">
                    <div class="title" v-if="!sidebarCollapse">后台管理</div>
                </div>
                <!-- 导航菜单 -->
                <!-- 
                router 开启路由模式
                -->
                <el-menu default-active="welcome" :collapse="sidebarCollapse" unique-opened router>
                    <el-menu-item index="welcome">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">欢迎</span>
                    </el-menu-item>
                    <el-submenu index="system">
                        <template slot="title">
                            <i class="el-icon-s-tools"></i>
                            <span>系统中心</span>
                        </template>
                        <el-menu-item index="user">用户管理</el-menu-item>
                    </el-submenu>
                    <el-submenu index="clazz">
                        <template slot="title">
                            <i class="el-icon-s-management"></i>
                            <span>选课中心</span>
                        </template>
                        <el-menu-item index="course">课程管理</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header height="61px" class="nav">
                    <i :class="['icon', sidebarCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"
                        @click="sidebarCollapse = !sidebarCollapse"></i>
                    <!-- 下拉菜单组件 @command -->
                    <el-dropdown @command="handleCommand">
                        <div class="el-dropdown-link user">
                            <i class="el-icon-s-custom"></i>&emsp;
                            <span>{{ nickName }}</span>
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>个人中心</el-dropdown-item>
                            <el-dropdown-item divided command="changePassword">修改密码</el-dropdown-item>
                            <el-dropdown-item divided command="logout">退出系统</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-header>
                <el-main class="main">
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'Index',
    data() {
        return {
            sidebarCollapse: false,
            nickName: '未登录'
        }
    },
    methods: {
        // 参数command: 点击下拉菜单项的cmmand属性值
        handleCommand(command) {
            if (command == 'logout') {
                this.$confirm('确定退出系统吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    // 登出操作: 1.清除登录信息 2.路由导航到登录页
                    sessionStorage.removeItem('loginUser');
                    this.$router.push('/login');
                }).catch(() => { });
            }
        }
    },
    mounted() {
        let loginUser = JSON.parse(sessionStorage.getItem('loginUser'));
        if (loginUser) {
            this.nickName = loginUser.nickName || '用户';
        }
    }
}
</script>

<style scoped>
.logo {
    height: 60px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
}

.logo-collapse {
    height: 60px;
    border-bottom: 1px solid #e6e6e6;
}

.logo .title {
    color: #409eff;
    font: bold 30px "楷体";
}

.logo-collapse .title {
    width: 0;
}

.logo img,
.logo-collapse img {
    margin: 5px;
    width: 50px;
}

.el-menu {
    border-right: 0 !important;
}

.el-menu:not(.el-menu--collapse) {
    width: 200px;
}

.nav {
    /* border-bottom: 1px solid #e6e6e6; */
    display: flex;
    justify-content: space-between;
}

.nav .icon {
    font-size: 30px;
    color: #409eff;
    line-height: 61px;
    cursor: pointer;
}

.nav .user {
    color: #409eff;
    line-height: 61px;
    cursor: pointer;
}

.main {
    background-color: #e9eef3;
}
</style>